@import "import";
//css初始化start
*, :after, :before {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body{
  font-family: '微软雅黑';
  font-size: 14px;
  background-color: @bg;
}
ul, ol {
  list-style:none;
}
small{
  font-size:12px;
}

sup {
  vertical-align:text-top;
}
sub{
  vertical-align:text-bottom;
}
//css初始化end
//flex布局两列两端对齐
.flexTwo{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

//flex纵向排列
.flexCol{
  display: flex;
  flex-direction: column;
  justify-content:  space-around;
  align-items: center;
}

.flexOne{
  flex: 1;
}

.flexWrap{
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexDiv{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .flexLeft{
    display: flex;
    .rightDiv{
      .flexCol;
      margin-left: 10px;
    }
  }
  .flexRight{
    .flexWrap;
  }
}
//圆形
.circle(@difW,@difH,@radius){
  width: @difW;
  height: @difH;
  border-radius: @radius;
  overflow: hidden;
}

//容器
.box(@mt){
  background-color: @f;
  padding: 10px;
  margin-top: @mt;
}

//过度
.filter{
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
}

//按钮
.button(@bgc,@tc,@dc,@br){
  display: inline-block;
  padding: 5px 15px;
  background-color: @bgc;
  color: @tc;
  border: 1px solid @dc;
  border-radius: @br;
}

.textMore {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.input{
  border: none;
  outline: none;
  padding: 0 10px;
}

.shadow(@a){
  box-shadow: 0 0 10px rgba(0,0,0,@a);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,@a);
}

//a标签hover
a:hover{
  .filter;
  color: @theme;
}

//次要文字
.minorTxt{
  color: @minorTxt;
  font-size: 12px;
}

input::-webkit-input-placeholder { /* WebKit browsers */
  color: @minorTxt;
  font-family: '微软雅黑';
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: @minorTxt;
  font-family: '微软雅黑';
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: @minorTxt;
  font-family: '微软雅黑';
}

input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: @minorTxt;
  font-family: '微软雅黑';
}
//下拉菜单
.openMenu{
  position: relative;
  .menu{
    position: absolute;
    background-color: @f;
    min-width: 100px;
    right: 0;
    top: 60px;
    padding: 10px;
    border: 1px solid @bc;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    border-radius: 3px;
    z-index: 10;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .2s ease 0s,transform .2s ease 0s;
    -webkit-transition: opacity .2s ease 0s,transform .2s ease 0s;
    &:before{
      height: 8px;
      background-color: @f;
      content: '';
      position: absolute;
      width: 8px;
      transform: rotate(45deg);
      top: -4px;
      right: 22px;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
      z-index: 9;
    }
    &:after{
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 10;
      height: 8px;
      background-color: @f;
      content: '';
    }
    li{
      line-height: 25px;
    }
  }
  .in{
    opacity: 1;
    transform: translateY(0);
  }
}
.myCard{
  width: 300px;
  background-color: @f;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  margin: 200px auto;
  overflow: hidden;
  position: absolute;
  right:0;
  top: -140px;
  display: none;
  z-index: 999999;
  .cardBg{
    height: 80px;
    width: 100%;
    background: url("../../images/common/card.jpg");
    background-size: contain;
    position: relative;
    margin-bottom: 40px;
    .cardAvatar{
      .circle(70px,70px,100%);
      border: 2px solid @f;
      bottom: -35px;
      left: 50%;
      margin-left: -35px;
      position: absolute;
    }
  }
  .name{
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 3px;
  }
  .job{
    font-size: 13px;
    color: @minorTxt;
    text-align: center;
  }
  .contact{
    padding: 10px 20px;
    display: flex;
    align-items: center;
    i{
      margin-right: 20px;
      font-size: 24px!important;
      color: #a9b5c3!important;
    }
    .detail{
      p:first-child{
        color: #a9b5c3;
        margin-bottom: 5px;
      }
    }
  }
}
.absolute{
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
}
img{
  width: 100%;
}
@font-face {
  font-family: myFont;
  src: url('../../images/user/myfont.ttf');
}
@-webkit-keyframes moving_img {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}

@-moz-keyframes moving_img {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}

@-ms-keyframes moving_img {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}

@-o-keyframes moving_img {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}

@keyframes moving_img {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
  }
}
.idBox{
  background-color: @f;
  border-radius: 3px;
  .shadow(.05);
}
.allWrap{
  padding: 20px 0;
  overflow: hidden;
  zoom: 1;
  display: flex;
  .listWrap{
    flex: 1;
    .top{
      width: 100%;
      padding: 20px;
      .idBox;
      margin-bottom: 20px;
      display: flex;
      .ipWrap{
        width: 565px;
        height: 40px;
        border: 2px solid @theme;
        display: flex;
        i{
          padding-left: 10px;
          line-height: 36px;
          color: @minorTxt;
        }
        input{
          flex: 1;
        }
      }
      .sdWrap{
        flex: 1;
        display: flex;
        align-items: center;
        b{
          padding: 0 10px;
          color: @minorTxt;
          font-weight: normal;
        }
        .sdBtn{
          flex: 1;
          height: 100%;
          border: 1px dashed #19bca1;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
          .filter;
          span{
            .filter;
            color: @theme;
          }
          &:hover{
            .shadow(.1);
            span{
              transform: rotateX(360deg);
              -webkit-transform: rotateX(360deg);
            }
          }
        }
      }
    }
    .list{
      .idBox;
      .layui-tab{
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        .layui-tab-title{
          border: none;
          li{
            padding: 0 20px;
            &:after{
              border: none;
            }
          }
        }
      }
      .layui-tab-content{
        padding:  0;
      }
    }
    .listLi{
      padding: 10px;
      .filter;
      &:hover{
        .shadow(.3);
        .fly-tip{
          a{
            color: @theme!important;
          }
        }
      }
      .rightDiv{
        align-items: flex-start!important;
        .fly-tip{
          a{
            color: #333;
            margin-right: 10px;
            .filter;
            max-width: 615px;
          }
        }
        .info{
          span{
            margin-right: 15px;
            color: @minorTxt;
            font-size: 12px;
            i{
              margin-right: 5px;
            }
          }
        }
      }
      .flexRight{
        color: @minorTxt;
      }
    }
  }
  .edges{
    width: 310px;
    margin-left: 20px;
    .idBox{
      margin-bottom: 20px;
    }
    .edTit{
      padding: 10px;
      border-bottom: 1px dashed #eee;
    }
    .my{
      height: 100px;
      border-radius: 50px 0 0 50px;
      display: flex;
      .avaTar{
        .circle(100px,100px,100%);
        .shadow(.1)
      }
      .info{
        .flexCol;
        align-items: flex-start;
        justify-content: center;
        padding-left: 20px;
        a{
          color: #333;
          font-weight: 600;
          font-size: 15px;
          max-width: 165px;
        }
        p{
          margin-top: 10px;
          span{
            margin-right: 15px;
            color: @minorTxt;
          }
        }
      }
    }
    .best{
      .idBox;
      .rank{
        padding:0 0 10px 10px;
        display: flex;
        flex-wrap: wrap;
        .one{
          margin: 10px 10px 0 0;
          width: 65px;
          height: 85px;
          position: relative;
          overflow: hidden;
          cite{
            background-color: rgba(0,0,0,.3);
            color: @f;
            text-align: center;
            width: 100%;
            font-size: 12px;
            max-width: 65px;
            position: absolute;
            top:41px;
          }
          i{
            font-size: 12px;
            width: 100%;
            font-style: normal;
            text-align: center;
          }
        }
      }
    }
    .fly-list-one{
      padding: 0 10px 10px;
      li{
        .flexTwo;
        line-height: 30px;
      }
    }
  }
}

.dtWrap{
  .idBox;
  padding: 20px;
  .dtTit{
    font-size: 28px;
    line-height: 1.5;
    font-weight: 500;
  }
  .dtInfo{
    margin: 10px 0;
    color: @minorTxt;
    font-size: 13px;
    span{
      margin-left: 15px;
    }
  }
  .mainTxt{
    font-size: 16px;
    line-height: 30px;
  }
  .btnGroup{
    margin: 40px 0 69px;
    text-align: center;
    a{
      display: inline-block;
      padding: 9px 20px;
      border-radius: 100px;
      cursor: pointer;
      text-align: center;
      .filter;
      border: 1px solid @theme;
      min-width: 160px;
      &:hover{
        .shadow(.1);
        &:first-child{
          background-color: #fff2f2;
        }
        &:last-child{
          background-color: rgba(95,184,120,.2);
        }
      }
      .iconfont{
        margin-right: 8px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
      }
      .count{
        position: relative;
        line-height: 20px;
        padding-left: 10px;
        margin-left: 10px;
        &:after{
          content: '';
        }
      }
      &:first-child{
        color: #FC7D7D;
        border-color: #FC7D7D;
        .count{
          border-left: 1px solid #FC7D7D;
        }
      }
      &:last-child{
        margin-left: 20px;
        color: @theme;
        .count{
          border-left: 1px solid @theme;
        }
      }
    }
  }
  .dtCmt{
    border-top: 1px solid #f0f0f0;
    position: relative;
    .tit{
      color: #333;
      font-size: 18px;
      border-bottom: 4px solid @theme;
      position: absolute;
      top:-29px;
    }
    .self{
      display: flex;
      align-items: center;
      margin-top: 20px;
      .avaTar{
        .circle(50px,50px,100%);
        margin-right: 15px;
      }
      a{
        color: #333;
      }
    }
    textarea{
      width: 100%;
      height: 180px;
      resize: none;
      margin-top: 15px;
      box-shadow: none;
      border-color: #f0f0f0;
      padding: 10px;
      &:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(95,184,120,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(95,184,120,.6);
      }
    }
    .btnSend{
      width: 148px;
      height: 48px;
      line-height: 48px;
      color: @f;
      background-color: @theme;
      font-size: 18px;
      margin: 20px 0 60px;
      display: inline-block;
      text-align: center;
      border: 1px solid @f;
      .filter;
      &:hover{
        background-color: @f;
        color: @theme;
        border-color: @theme;
      }
    }
    .allCmt{
      border-top: 1px solid #f0f0f0;
      position: relative;
      .cmtLi{
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        .avaTar{
          .circle(50px,50px,100%);
          margin-right: 10px;
        }
        &:last-child{
          border: none;
        }
        .rightDiv{
          align-items: flex-start!important;
          a{
            color: #333;
          }
          span{
            color: @minorTxt;
            font-size: 12px;
          }
        }
        .flexRight{
          color: @minorTxt;
          font-size: 12px;
        }
        p{
          padding: 10px 0;
          color: #666;
        }
      }
    }
  }
}